HTML5で使えるスマートフォンの機能
HTML5を使ったスマホアプリ開発に興味があったので、カメラやGPSなどスマートフォンの機能がどこまで使えるのか試してみました。 Webアプリケーションなのでブラウザに依存しますが、以下のサイトにモバイルブラウザ別対応状況が書かれています。 http://mobilehtml5.org
試したのは以下の機能です。端末はGalaxy NexusとiPod Touch 4世代を使いました。 Androidのバージョンは4.0.4でブラウザはChromeと一部Firefoxです。iOSは5.0.1、Safariで試しました。 スマートフォンで確認できるようにサンプルを作ったので試してみて下さい。
- タッチイベント(Touch Events)
- マルチメディア(Multimedia)
- 位置情報の取得(Geolocation API)
- 加速度センサー(Motion Sensors)
- ファイルアクセス(File API)
- カメラ(HTML Media Capture)
- バイブレーション(Vibration API)
- 音声入力(Google Speech Input API)
■タッチイベント(Touch Events)
サンプルはタッチした座標を表示するだけのサンプルです。 13行目のevent.touchesでタッチ位置情報の配列を取得していますが、マルチタッチの場合は複数、要素が含まれます。 座標のとり方はclientX(Y)の他にpageX(Y),screenX(Y)と３種類あります。
- clientX(Y)：ビューポート上の座標
- pageX(Y)：ページ上の座標
- screenX(Y):スクリーン上の座標
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<meta name="viewport" content="initial-scale=1.0,user-scalable=no" />
<title>Touch Eventsサンプル</title>
<script>
window.document.addEventListener("touchstart", function(event){
event.preventDefault();
var result = document.getElementById("result");
result.innerHTML =
"clientX:"+ event.touches[0].clientX+ "<br>" +
"clientY:"+ event.touches[0].clientY;
}, true);
window.document.addEventListener("touchmove", function(event){
event.preventDefault();
var result = document.getElementById("result");
result.innerHTML =
"clientX:"+ event.touches[0].clientX+ "<br>" +
"clientY:"+ event.touches[0].clientY;
}, true);
window.document.addEventListener("touchend", function(event){
event.preventDefault();
var result = document.getElementById("result");
result.innerHTML = "";
}, true);
</script>
</head>
<body>
<div id="result"></div>
</body>
</html>
■マルチメディア(Multimedia)
指定した音声ファイルを再生、停止、巻き戻しするだけのサンプルです。 音楽や効果音の再生にはaudioタグを使います。シークバーを表示したい場合はcontrols属性を指定します。 PC版のGoogle Chromeでは音量調節のコンポーネントがコントロールに含まれますが、スマートフォンの場合は着信音量を調節すれば、調節できます。 効果音を鳴らす際に遅延時間を少なくしたい場合はpreload属性を使えば遅延時間を短縮できます。 audioタグ内にあるsourceタグで音声ファイルを指定しますが、ブラウザによってサポートしている形式が違うので複数指定します。(mp3,wav,ogg)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1.0" />
<title>Multimediaサンプル</title>
<script>
window.addEventListener("load", function(){
if (!HTMLAudioElement){
return;
}
var audio = document.getElementById("audio");
document.getElementById("play").addEventListener("click", function(){
audio.play();
}, true);
document.getElementById("stop").addEventListener("click", function(){
audio.pause();
}, true);
document.getElementById("back").addEventListener("click", function(){
audio.currentTime = 0;
audio.pause();
}, true);
}, true);
</script>
</head>
<body>
<audio id="audio" controls preload>
<source src="sample.mp3">
<source src="sample.wav">
<source src="sample.ogg">
<p>HTML5 Audio 使用不可</p>
</audio>
<div>
<input type="button" id="play" value="再生">
<input type="button" id="stop" value="停止">
<input type="button" id="back" value="戻る">
</div>
</body>
</html>
■位置情報の取得(Geolocation)
位置情報を取得して表示するサンプルです。 Wi-Fiか3G通信が使える環境であれば、GPS機能が使えなくても大丈夫でした。 サンプルでは緯度(latitude)、経度(longitude)しか取得していませんが、この他にも
- 高度：altitude
- 方角：heading
- 緯度経度の誤差(単位はメートル):accuracy
- 高度の誤差(単位はメートル):altitudeAccuracy
などが取得できます。誤差に関しては一定以上の場合は再度計測する、といった使い方のようです。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<meta name="viewport" content="initial-scale=1.0" />
<title>Geolocationサンプル</title>
<script>
window.addEventListener("load", function(){
var result = document.getElementById("result");
if (!navigator.geolocation){
result.innerHTML = "Geolocation 使用不可";
return;
}
var option = {
timeout : 10000
}
navigator.geolocation.watchPosition(resultHandler, faultHandler, option);
function resultHandler(position){
var latitude = position.coords.latitude;
var longitude = position.coords.longitude;
result.innerHTML = "緯度："+latitude+"<br>" +
"経度："+longitude;
}
function faultHandler(error){
result.innerHTML = error.code;
}
}, true);
</script>
</head>
<body>
<div id="result"></div>
</body>
</html>
■加速度センサー(Motion Sensors)
重力加速度と回転を取得して値を表示するサンプルです。 加速度や回転に関しては以下のサイトに詳しく書いてありました。 加速度センサとジャイロで体の動きを感じるアプリを作る
加速度、重力加速度はdevicemotionイベント、回転はdeviceorientationイベントで取得します。 加速度を取得する場合は9行目から11行目のevent.accelerationIncludingGravityをevent.accelerationにします。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<meta name="viewport" content="initial-scale=1.0"/>
<title>Motion Sensorsサンプル</title>
<script>
window.addEventListener("devicemotion", function(event1){
var x = event1.accelerationIncludingGravity.x;
var y = event1.accelerationIncludingGravity.y;
var z = event1.accelerationIncludingGravity.z;
var result1 = document.getElementById("result1");
result1.innerHTML =
"X："+ Math.round(x * 10) / 10 +"<br>" +
"Y："+ Math.round(y * 10) / 10 +"<br>" +
"Z："+ Math.round(z * 10) / 10;
}, true);
window.addEventListener('deviceorientation', function(event2) {
var alpha = event2.alpha;
var beta = event2.beta;
var gamma = event2.gamma;
result2.innerHTML =
"alpha："+ Math.round(alpha * 10) / 10 +"<br>" +
"beta："+ Math.round(beta * 10) / 10 +"<br>" +
"gamma："+ Math.round(gamma * 10) / 10;
}, true);
</script>
</head>
<body>
<div id="result1"></div>
<div id="result2"></div>
</body>
</html>
■ファイルアクセス(File API)
選択したファイルを読み込んで、内容を表示するサンプルです。 スマートフォンでどのようにファイルを選択するのか確認したかったので試してみました。 Android端末で試したところ、どのファイラーを使用するか聞かれました。 ファイラーを選択するとSDカード内のファイルを選択できます。 iOSのSafariでも一応試してみましたが使えないようです。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<meta name="viewport" content="initial-scale=1.0" />
<title>File APIサンプル</title>
<script>
window.addEventListener("load", function(){
var result = document.getElementById("result");
if (!window.File){
result.innerHTML = "File API 使用不可";
return;
}
document.getElementById("selectFile").addEventListener("change", function(){
var fileList = document.getElementById("selectFile").files;
result.innerHTML = "ファイルサイズ：" + fileList[0].size + "byte<br/>";
var reader = new FileReader();
reader.readAsText(fileList[0], "utf-8");
reader.onload = function(event){
result.innerHTML += event.target.result;
}
reader.onerror = function(event){
var code = event.target.error.code
result.innerHTML += "エラー発生："+ code;
}
}, true);
}, true);
</script>
</head>
<body>
<form>
<input type="file" id="selectFile" accept="text/*" multiple>
</form>
<div id="result"></div>
</body>
</html>
■カメラ(HTML Media Capture)
カメラで撮影した画像に表示するサンプルです。 iOSのSafariでも試してみましたがカメラの画面に遷移できませんでした。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1.0" />
<title>HTML Media Captureサンプル</title>
<script>
window.addEventListener("load", function(){
if (!window.File){
result.innerHTML = "File API 使用不可";
return;
}
document.getElementById("imageFile").addEventListener("change", function(){
var reader = new FileReader();
reader.onload = function(event){
document.getElementById("image").src = reader.result;
}
var file = document.getElementById("imageFile").files[0];
reader.readAsDataURL(file);
}, true);
}, true);
</script>
</head>
<body>
<form>
<input type="file" accept="image/*;capture=camera" id="imageFile"/>
</form>
</body>
<img id="image"width="200" height="200">
</html>
■バイブレーション(Vibration API)
W3CのVibration APIは勧告候補なので、まだ実装されているブラウザはないようですが、 Firefox Beta(14.0)ではvibrateをmozVibrateとするとバイブレーション機能を使うことができました。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<meta name="viewport" content="initial-scale=1.0" />
<title>Vibrate APIサンプル</title>
<script>
window.addEventListener("load", function(){
document.getElementById("vibrate").addEventListener("click", function(){
navigator.mozVibrate(3000);
//navigator.vibrate(3000);
}, true);
}, true);
</script>
</head>
<body>
<form>
<input type="button" id="vibrate" value="バイブレート">
</form>
</body>
</html>
■音声入力(Google Speech Input API)
PC版のGoogle Chromeでは音声入力機能が使えるので、AndroidのChromeではどうなのか試してみました。 まだスマートフォンのマイクを使った音声入力機能が使えないようです。 以下のソースで試しましたが、PC版のように音声入力のアイコンが表示されませんでした。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<meta name="viewport" content="initial-scale=1.0" />
<title>Google Speech Input APIサンプル</title>
<script>
window.addEventListener("load", function(){
var result = document.getElementById("result");
var speech = document.getElementById("speech");
speech.onwebkitspeechchange = onSpeech;
function onSpeech(){
result.innerHTML = speech.value;
}
}, true);
</script>
</head>
<body>
<form>
<input id="speech" type="text" x-webkit-speech lang="ja"/>
<div id="result"></div>
</form>
</body>
</html>
■まとめ
調べたことは以上になります。一部のブラウザしか使えない、少し前の端末では使えないなど制約が結構ありますが Webアプリでこんなことができるのか、という驚きもあり調べてて楽しかったです。 これからの技術だと思うので今から少しづつ覚えていこうと思いました。
![[SwiftUI] iOS 17以降の@Environmentまとめ](https://images.ctfassets.net/ct0aopd36mqt/wp-thumbnail-291ab56731465588aade0a1c471324b7/8ec78a461f25144ed01585a448b8974b/swift-ui-eyecatch.png)
